<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>邮件订单</title>
  <meta name="keywords" content="">
  <meta name="description" content="">
  <meta name="format-detection" content="telephone=no">
  <link rel="stylesheet" href="./layui/css/layui.css">
  <link rel="stylesheet" href="./css/style.css">
  <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
  <script src="js/resize.js"></script>

  <style>
      .list-container{
        max-width: 700px;
        width: 700px;
        margin: 50px auto;
        padding: 30px 30px 50px 30px;
        box-sizing: border-box;
        background:rgba(255,255,255,1);
        box-shadow:0px 5px 15px 0px rgba(0,0,0,0.3);
      }
      .list-container .head .logo{
        float: left;
        width: 200px;
      }
      .list-container .head .logo img{
        width: 100%;
      }
      .list-container .head .head-r{
        float: right;
        margin-top: 6px;
      }
      .list-container .head .head-r h3{
        font-size:28px;
        font-weight:300;
        color:rgba(108,108,108,1);
      }
      
      .list-container .user-list{
        margin-top: 20px;
      }
      .user-list .user-box{
        float: left;
        width:319px;
        border-radius:5px;
      }
      .user-list .user-box .item{
        width:319px;
        height:61px;
        padding-left: 15px;
        padding-top: 11px;
        background:rgba(250,250,250,1);
        border-radius:5px;
        margin-bottom: 2px;
        box-sizing: border-box;
      }
      .user-list .user-box .item:last-child{margin-bottom: 0;}
      .user-list .user-box .item h3,.user-list .user-box .item-1 h3{
        font-size:13px;
        font-weight:400;
        color:rgba(108,108,108,1);
      }
      .user-list .user-box .item p,.user-list .user-box .item-1 p{
        font-size:13px;
        font-weight:400;
        color:rgba(83,91,254,1);
      }
      .user-list .user-box .item-1 p{
        color:rgba(59,59,59,1);
      }
      .user-list .user-box-1{
        padding-top: 15px;
        padding-left: 15px;
        margin-left: 2px;
        background-color: rgba(250,250,250,1);
        box-sizing: border-box;
      }
      .user-list .user-box-1 .item-1{margin-bottom: 18px;}
      .user-list .user-box-1 .item-1:last-child{margin-bottom: 16px;}

      .list-container .product{margin-top: 30px;}
      .product .product-head{
        height:53px;
        line-height: 53px;
        background:rgba(250,250,250,1);
        border-radius:5px;
      }
      .product .product-head h3{
        padding-left: 15px;
        font-size:13px;
        font-weight:400;
        color:rgba(10,10,10,1);
      }

      .product .product-cont{
        padding: 20px 15px 0;
      }
      .product .product-item{
        margin-bottom: 20px;
      }
      .product-item .pic{
        width:100px;
        float: left;
      }
      .product-item .pic img{
        width: 100%;
        border-radius: 8px;
      }
      .product-item .info{
        float: left;
        width: 368px;
        margin-left:15px;
      }
      .product-item .info .product-name{
        margin-top: 10px;
        font-size:13px;
        font-weight:400;
        color:rgba(10,10,10,1);
      }
      .product-item .info .product-size{
        margin-bottom: 15px;
        font-size:13px;
        font-weight:400;
        color:rgba(109,109,109,1);
      }
      .product-item .info .product-bar span{
        font-size:13px;
        font-weight:400;
        color:rgba(108,108,108,1);
      }
      .product-item .info .product-bar .span1{
        color:rgba(177,90,67,1);
        margin-right: 20px;
      }
      .product-item .product-price{
        float: right;
        margin-top: 10px;
        font-size:13px;
        font-weight:500;
        color:rgba(177,90,67,1);
      }

      .product-detail .product-detail-ul{
        border-top: 1px solid #CECECE;
      }
      .product-detail .border-bt{border-bottom: 1px solid #CECECE;}
      .product-detail-ul .product-detail-li{
        float: right;}
      .product-detail-ul .product-detail-li .title,
      .product-detail-ul .product-detail-li .text{
        height: 53px;
        line-height: 53px;
        text-align: right;
        float: left;
        border-right: 1px solid #CECECE;
        box-sizing: border-box;
        font-size:15px;
        font-weight:400;
        color:rgba(10,10,10,1);
      }
      .product-detail-ul .product-detail-li .title{padding-right: 30px;}
      .product-detail-ul .product-detail-li .text{padding-right: 15px;}
      .product-detail-ul .product-detail-li .no-border{border-right: none;}
      .product-detail-ul .product-detail-li .w150{width: 150px;}
      .product-detail-li-1{width: 300px;}
      .product-detail-ul .product-detail-li .w490{width: 490px;}


      .info-block{
        height:53px;
        margin-top: 20px;
        background:rgba(250,250,250,1);
        border-radius:5px;
      }
      .info-block .info-block-l{
        float: left;
        margin-top: 20px;
        padding-left: 15px;
      }
      .info-block .info-block-r{
        float: right;
        margin-top: 8px;
        padding-right: 15px;
      }
      .info-block h3,.info-block p{
        font-size:13px;
        font-weight:400;
        color:rgba(10,10,10,1);
      }
      .info-block p span{
        color: #B15A43;
      }
      .info-block-1{
        height: 99px;
        padding: 20px 15px;
        box-sizing: border-box;
      }
      .info-block-1 h3{color: #B15A43;}


      .foot{margin-top: 20px;}
      .foot-info{
        width: 440px;
        margin:0 auto;}
      .foot-info p{
        text-align: center;
        font-size:13px;
        font-weight:400;
        color:rgba(10,10,10,1);
      }
      .foot .link-icon{
        text-align: center;
        margin-top: 10px;
      }
      .foot .link-icon a{
        display: inline-block;
        width: 30px;
        margin: 0 12px;
      }
      .foot .link-icon a img{
        width: 100%;
      }
  </style>
</head>
<body>

<div class="list-container">
  <div class="list-main">

    <div class="head clearfix">
      <div class="logo"><a href="javascript:;"><img src="images/logo_cn.png" alt="思联画饰"></a></div>
      <div class="head-r"><h3>Quotation List</h3></div>
    </div>

    <div class="user-list clearfix">
      <div class="user-box">
        <div class="item">
          <h3>Name</h3>
          <p>Cristiano Ronaldo</p>
        </div>
        <div class="item">
          <h3>Date</h3>
          <p>July 04, 2020</p>
        </div>
        <div class="item">
          <h3>Order Number</h3>
          <p>#1828394839</p>
        </div>
      </div>
      <div class="user-box user-box-1">
        <div class="item-1">
          <h3>Customer</h3>
          <p>DIRIMART EXPORT IMPORT CO.,LTD</p>
        </div>
        <div class="item-1">
          <p>434 King's Rd, Chelsea,<br>
          London SW10 0LJ,<br>
          England</p>
        </div>
        <div class="item-1">
          <p>Tel: +44(0)203-875-5299</p>
        </div>
      </div>
    </div>

    <div class="product">
      <div class="product-head"><h3>Product List</h3></div>
      <div class="product-cont">
        <div class="product-item clearfix">
          <div class="pic"><img src="images/c1.jpg" alt=""></div>
          <div class="info">
            <div class="product-name">BQPT1262</div>
            <div class="product-size">Size | W910mm x H1100mm ; W25.2inches x H29.5inches</div>
            <div class="product-bar">
              <span class="span1">$17.94</span>
              <span>Quantity: 10</span>
            </div>
          </div>
          <div class="product-price">$179.40</div>
        </div>
        <div class="product-item clearfix">
          <div class="pic"><img src="images/c1.jpg" alt=""></div>
          <div class="info">
            <div class="product-name">BQPT1262</div>
            <div class="product-size">Size | W910mm x H1100mm ; W25.2inches x H29.5inches</div>
            <div class="product-bar">
              <span class="span1">$17.94</span>
              <span>Quantity: 10</span>
            </div>
          </div>
          <div class="product-price">$179.40</div>
        </div>
        <div class="product-item clearfix">
          <div class="pic"><img src="images/c1.jpg" alt=""></div>
          <div class="info">
            <div class="product-name">BQPT1262</div>
            <div class="product-size">Size | W910mm x H1100mm ; W25.2inches x H29.5inches</div>
            <div class="product-bar">
              <span class="span1">$17.94</span>
              <span>Quantity: 10</span>
            </div>
          </div>
          <div class="product-price">$179.40</div>
        </div>
        <div class="product-item clearfix">
          <div class="pic"><img src="images/c1.jpg" alt=""></div>
          <div class="info">
            <div class="product-name">BQPT1262</div>
            <div class="product-size">Size | W910mm x H1100mm ; W25.2inches x H29.5inches</div>
            <div class="product-bar">
              <span class="span1">$17.94</span>
              <span>Quantity: 10</span>
            </div>
          </div>
          <div class="product-price">$179.40</div>
        </div>
      </div>
      <div class="product-detail">
        <div class="product-detail-ul clearfix">
          <div class="product-detail-li product-detail-li-1">
            <div class="w150 title">Subtotal</div>
            <div class="w150 text no-border">$2832.28</div>
          </div>
          <div class="product-detail-li product-detail-li-1">
            <div class="w150 title">Quantity</div>
            <div class="w150 text">40</div>
          </div>
        </div>
        <div class="product-detail-ul clearfix">
          <div class="product-detail-li">
            <div class="w490 title">Tax</div>
            <div class="w150 text no-border">$1000.00</div>
          </div>
        </div>
        <div class="product-detail-ul clearfix">
          <div class="product-detail-li">
            <div class="w490 title">Total</div>
            <div class="w150 text no-border">$2832.28</div>
          </div>
        </div>
        <div class="product-detail-ul border-bt clearfix">
          <div class="product-detail-li">
            <div class="w490 title">Amount Paid</div>
            <div class="w150 text no-border">$1000.00</div>
          </div>
        </div>
      </div>
    </div>

    <div class="info-block clearfix">
      <div class="info-block-l"><h3>Your Sales Consultant</h3></div>
      <div class="info-block-r">
        <p>Phoebe.Suen / Sales Representative(UK Office)</p>
        <p><span>M.</span>+44 (0) 787-618-7254 / <span>E.</span>phoebe.suen@slarts.com</p>
      </div>
    </div>

    <div class="info-block info-block-1">
      <h3>Silian Art and Design</h3>
      <p>Lingdong Industrial Zone, Tanzhou, Dagang Town Nansha, Guangzhou, China</p>
      <p>www.slarts.com / Tel: (8620)8499-8666 / Fax: (8620)8493-1777 / Email: sl@slarts.com</p>
    </div>

    <div class="foot">
      <div class="foot-info">
        <p>Remarks: It is valid for 30 days from the date of deposit payment.
        <br>If it is overdue, it will not retain the goods and not refund the deposit.</p>
      </div>
      <div class="link-icon">
          <a href="javascript:;"><img src="images/f.jpg" alt=""></a>
          <a href="javascript:;"><img src="images/t.jpg" alt=""></a>
          <a href="javascript:;"><img src="images/c.jpg" alt=""></a>
          <a href="javascript:;"><img src="images/wb.jpg" alt=""></a>
          <a href="javascript:;"><img src="images/wx.jpg" alt=""></a>
      </div>
    </div>

  </div>
</div>

<script src="./layui/layui.js"></script>
<script>


//JavaScript代码区域
layui.use('element', function(){
  var element = layui.element;
  
});

//Demo
layui.use(['form', 'layedit', 'laydate'], function(){
  var form = layui.form
  ,layer = layui.layer

  //自定义验证规则
  form.verify({
    title: function(value){
      if(value.length < 5){
        return '标题至少得5个字符啊';
      }
    }
  });
  
  
  //监听提交
  form.on('submit(demo1)', function(data){
    layer.alert(JSON.stringify(data.field), {
      title: '最终的提交信息'
    })
    return false;
  });
 


});


</script>
</body>
</html>